<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="app"></div>
    <input type="text" id="ipt" oninput="getVal(this)">
</body>
<script>
    // 数据劫持：指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果
    var msg = document.getElementById('app')
    var ipt = document.getElementById('ipt')
    var user = { userName: "luozan" }
    var obj = {}
    Object.defineProperty(obj, 'name', {
        get() {
            return user.userName
        },
        set(val) {
            user.userName = val
            msg.innerHTML = user.userName
        }
    })
    obj.name = 'luozan1'
    ipt.value = user.userName
    console.log(user.userName)
    console.log(obj.name)
    function getVal(e) {
        console.log(e)
        msg.innerHTML = e.value
    }
</script>

</html>